<template>
  <div class="discussBox">
    <van-row>
      <van-col span="2"></van-col>
      <van-col span="8">
        <p class="title">全部评论：</p>
      </van-col>
    </van-row>
    <div class="contain" v-for="(item,index) in list" :key="index">
      <van-row>
        <van-col span="2"></van-col>
        <!-- 头像 -->
        <van-col span="2">
          <img class="avatar" :src="item.avatar" alt />
        </van-col>
        <!-- 作者 -->
        <van-col span="10">
          <span class="author">{{item.userName}}</span>
        </van-col>
        <van-col span="10"></van-col>
      </van-row>
      <div class="content">
        <van-row>
          <van-col span="4"></van-col>
          <van-col span="20">{{item.commentContent}}</van-col>
        </van-row>
        <van-row class="time">
          <van-col span="4"></van-col>
          <!-- 时间 -->
          <van-col span="18">
            <span class="time">{{item.createdTime}}</span>
          </van-col>
          <van-col span="2">
            <img @click="showPopup(index)" class="replay" src="../../assets/huifu.png" alt />
          </van-col>
        </van-row>
        <div v-if="item.reList">
          <van-row v-for="(replayItem,index) in item.reList" :key="index">
            <van-col span="4"></van-col>
            <van-col
              class="replayBox"
              span="16"
            >{{replayItem.userName}}：{{replayItem.commentContent}}</van-col>
          </van-row>
        </div>
      </div>
      <van-divider />
    </div>
    <!-- 回复框 -->
    <van-popup v-model="show" round closed closeable position="bottom" :style="{ height: '40%' }">
      <van-field
        class="ipt"
        v-model="message"
        rows="1"
        autosize
        label="回复"
        type="textarea"
        placeholder="请尽情bb吧~"
      />
      <van-button class="btn" plain type="info" size="small" @click="siteReplay">提交回复</van-button>
    </van-popup>
  </div>
</template>
<script>
import { discussAll, issueDiscuss, replayList } from "../../api/forum-api";
import { Toast } from "vant";
export default {
  data() {
    return {
      list: [],
      show: false,
      message: "",
      reList: {},
      selectedIndex:"",
    };
  },
  props: {
    postsId: String
  },
  created() {
    this.getDiscussAll();
    // this.replay();
  },
  methods: {
    showPopup(index) {
      this.selectedIndex = index;
      this.show = true;
    },
    // 获取评论
    getDiscussAll() {
      discussAll(this.postsId).then(res => {
        this.list = res.rows;
        for (let i in this.list) {
          this.replay(i);
        }
      });
    },
    // 回复列表
    replay(i) {
      replayList(this.list[i].commentId).then(res => {
        this.list[i].reList = res.rows;
        this.$forceUpdate();
      });
    },
    // 回复言论
    siteReplay() {
      issueDiscuss(this.postsId, this.list[this.selectedIndex].commentId, this.message).then(
        res => {
          Toast.success("回复成功");
          this.replay(this.selectedIndex)
          this.show = false;
        }
      );
    }
  }
};
</script>
<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}
.discussBox {
  padding-bottom: 50px;
  .title {
    font-size: 14px;
  }
  .contain {
    padding: 5px 0;
    width: 95%;
    margin-left: 2.5%;
    .avatar {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: inline-block;
    }
    .author {
      font-size: 12px;
      color: tomato;
      margin-top: 10px;
    }
    .time {
      font-size: 12px;
      color: gray;
    }
    .content {
      font-size: 12px;
      //   padding: 10px 0;
      .time {
        padding: 5px 0;
      }
      .replay {
        width: 15px;
        height: 15px;
      }
    }
  }
  .ipt {
    margin: 50px 10px 10px 10px;
  }
  .btn {
    float: right;
    margin-top: 10px;
    margin-right: 10px;
  }
  .replayBox {
    background-color: rgb(221, 219, 219);
  }
}
</style>